<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-06 08:43:22
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2022-06-29 16:42:44
 * @FilePath: \jzjy\src\views\Login\login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="content">
    <header>
      <div class="top">北京实验中学精准教研教学平台</div>
    </header>
    <main>
      <img src="../../assets/img/bgc.png" alt="" class="bgimg" />
      <div class="box box1" v-show="flag">
        <div class="top">
          <span class="fast">快速登录</span>
          <div class="tip">
            <span class="tips">账号登录</span>
            <span class="jiantou"></span>
            <span class="jiantou2"></span>
          </div>
          <img
            src="../../assets/img/footerYan.png"
            class="change"
            @click="change"
          />
        </div>
        <div class="ewm">
          <img src="../../assets/img/ewm.svg" alt="" />
          <p>打开微信</p>
          <p>扫一扫完成登录</p>
        </div>
      </div>

      <div class="lala" v-show="!flag">
        <div class="box box2" v-show="name == 1">
          <div class="top">
            <span class="zhanghao" @click="zhanghao">账号登录</span>

            <span class="duanxin" @click="duanxin">短信登录</span>
            <div class="tip">
              <span class="tips">快速登录</span><span class="jiantou"></span
              ><span class="jiantou2"></span>
            </div>
            <img
              src="../../assets/img/footerYan.png"
              alt=""
              class="change1"
              @click="change"
            />
          </div>
          <div class="login">
            <el-input
              v-model="username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
              autocomplete
              maxlength="22"
              size="large"
              clearable
              @focus="unFocus"
            ></el-input>
            <p class="errorMsg" v-show="errorUn">{{ errorMsgUn }}</p>
            <el-input
              v-model="password"
              placeholder="请输入密码"
              show-password
              prefix-icon="el-icon-lock"
              maxlength="16"
              size="large"
              clearable
              @focus="pwFocus"
            ></el-input>
            <p class="errorMsg" v-show="errorPw">{{ errorMsgPw }}</p>
            <SliderCheck
              :successFun="handleSuccessFun"
              :errorFun="handleErrorFun"
            ></SliderCheck>
            <span @click="goReset" class="forget">忘记密码?</span>
            <el-button type="primary" @click="zhLogin">登录</el-button>
          </div>
        </div>
        <div class="box box3" v-show="name == 2">
          <div class="top">
            <span class="zhanghao" @click="zhanghao"> 账号登录 </span>
            <span class="duanxin" @click="duanxin">短信登录</span>
            <div class="tip">
              <span class="tips">快速登录</span><span class="jiantou"></span
              ><span class="jiantou2"></span>
            </div>
            <img
              src="../../assets/img/footerYan.png"
              alt=""
              class="change1"
              @click="change"
            />
          </div>
          <div class="login">
            <div class="shoujihao">
              <el-input
                v-model="userphone"
                placeholder="请输入手机号码"
                prefix-icon="el-icon-mobile"
                autocomplete
                maxlength="11"
                size="large"
                clearable
                @focus="pnFocus"
              ></el-input>
              <p class="errorMsg" v-show="errorPn">{{ errorMsgPn }}</p>
            </div>
            <el-input
              v-model="yzm"
              placeholder="请输入短信验证码"
              prefix-icon="el-icon-message"
              maxlength="6"
              size="large"
              @focus="yzFocus"
            ></el-input>
            <p class="errorMsg" v-show="errorYz">{{ errorMsgYz }}</p>
            <span class="getYzm">获取验证码</span>
            <el-button type="primary" @click="dxLogin">登录</el-button>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import SliderCheck from "../../components/SliderCheck/SliderCheck.vue";
export default {
  name: "login",
  components: {
    SliderCheck,
  },
  data() {
    return {
      flag: true,
      name: 1,
      username: "",
      password: "",
      userphone: "",
      yzm: "",
      errorMsgUn: "用户名错误", //用户名错误提示信息
      errorMsgPw: "密码错误", //密码错误提示信息
      errorMsgPn: "手机号错误", //手机号错误提示信息
      errorMsgYz: "验证码错误", //验证码错误提示信息
      errorUn: false,
      errorPw: false,
      errorPn: false,
      errorYz: false,
    };
  },
  methods: {
    change() {
      this.flag = !this.flag;
    },
    zhanghao() {
      this.name = 1;
      console.log(this.name);
    },
    duanxin() {
      this.name = 2;
      console.log(this.name);
    },
    handleSuccessFun() {
      console.log("滑动成功");
    },
    // 滑块验证失败回调
    handleErrorFun() {
      console.log("滑动失败");
    },
    goReset() {
      this.$router.push("/reset");
    },
    unFocus() {
      this.errorUn = false;
    },
    pwFocus() {
      this.errorPw = false;
    },
    pnFocus() {
      this.errorPn = false;
    },
    yzFocus() {
      this.errorYz = false;
    },
    zhLogin() {
      if (this.username.trim() == "") {
        this.errorUn = true;
        this.errorMsgUn = "请填写用户名";
      } else if (this.password == "") {
        this.errorPw = true;
        this.errorMsgPw = "请输入密码";
      }
    },
    dxLogin() {
      const reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (this.userphone.trim() == "") {
        this.errorPn = true;
        this.errorMsgPn = "请填写手机号";
      } else if (!reg_tel.test(this.userphone)) {
        this.errorPn = true;
        this.errorMsgPn = "手机号格式错误";
      } else if (this.yzm.trim() == "") {
        this.errorYz = true;
        this.errorMsgYz = "请输入验证码";
      } else if (!Number.isInteger(this.yzm)) {
        this.errorYz = true;
        this.errorMsgYz = "请输入数字验证码";
      }
    },
  },
};
</script>
<style>
body {
  width: 100%;
  height: 100%;
  background-color: #e4e4e4;
}
</style>
<style lang="less" scoped>
#content {
  width: 100%;
  height: 100%;
  background-color: #e4e4e4;
  header {
    width: 100%;
    height: 70px;
    background-color: #fff;
    font-size: 20px;
    font-weight: 600;
    .top {
      width: 1200px;
      margin: 0 auto;
      line-height: 70px;
    }
  }
  main {
    position: relative;
    margin: 0 auto;
    height: 100%;
    width: 1200px;
    overflow: hidden;
    .bgimg {
      position: relative;
      top: 110px;
    }
    .box {
      position: absolute;
      top: 150px;
      right: 10px;
      border-radius: 5px;
      width: 450px;
      height: 500px;
      background-color: #fff;
      box-shadow: 20px #333;
      overflow: hidden;
      .top {
        position: relative;
        margin: 30px auto;
        width: 400px;
        border-bottom: 1px solid #ccc;
        .fast {
          display: inline-block;
          padding-bottom: 10px;
          text-align: center;
          width: 100px;
          font-size: 20px;
          font-weight: 600;
          border-bottom: 3px solid #409eff;
          cursor: pointer;
        }
        .zhanghao {
          display: inline-block;
          padding-bottom: 10px;
          text-align: center;
          width: 100px;
          font-size: 20px;
          font-weight: 600;
          //   border-bottom: 3px solid #409eff;
          cursor: pointer;
        }
        .duanxin {
          display: inline-block;
          padding-bottom: 10px;
          text-align: center;
          width: 100px;
          font-size: 20px;
          font-weight: 600;
          //   border-bottom: 3px solid #409eff;
          cursor: pointer;
        }
        .tip {
          display: inline-block;
          position: absolute;
          bottom: 21px;
          right: 11px;
          .tips {
            display: inline-block;
            text-align: center;
            width: 80px;
            font-size: 15px;
            border: 1px solid orange;
            border-right: 0;
            color: orange;
            cursor: pointer;
          }
          .jiantou {
            display: inline-block;
            position: relative;
            top: 5px;
            width: 0;
            height: 0;
            border: 11px solid transparent;
            border-left: 12px solid orange;
          }
          .jiantou2 {
            display: inline-block;
            position: relative;
            top: 4px;
            right: 24px;
            width: 0;
            height: 0;
            border: 10px solid transparent;
            border-left: 12px solid #fff;
          }
        }
        .change {
          position: relative;
          top: -10px;
          right: -270px;
          width: 30px;
          cursor: pointer;
        }
      }
      .ewm {
        text-align: center;
        img {
          display: inline-block;
          margin: 0 auto;
          width: 200px;
          height: 200px;
        }
      }
    }
    .box2 {
      .zhanghao {
        border-bottom: 3px solid #409eff;
      }
      .change1 {
        position: relative;
        top: -10px;
        right: -180px;
        width: 30px;
        cursor: pointer;
      }
      .login {
        margin: 0 auto;
        text-align: center;
        width: 90%;
        overflow: hidden;
        .el-input {
          height: 4 0px;
          margin: 10px 0;
        }
        .errorMsg {
          // float: left;
          // display: inline-block;
          // position: relative;
          // bottom: 10px;
          // left: -170px;
          margin-bottom: 5px;
          margin-left: 10px;
          text-align: left;
          color: red;
        }
        .el-button {
          cursor: pointer;
          margin-top: 20px;
          width: 100%;
          height: 40px;
        }
        .forget {
          cursor: pointer;
          float: right;
          margin-top: 10px;
          font-style: 14px;
          color: #409eff;
        }
      }
    }
    .box3 {
      .duanxin {
        border-bottom: 3px solid #409eff;
      }
      .change1 {
        position: relative;
        top: -10px;
        right: -180px;
        width: 30px;
      }
      .login {
        position: relative;
        margin: 0 auto;
        text-align: center;
        width: 90%;
        .shoujihao {
          height: 80px;
        }
        .el-input {
          height: 4 0px;
          margin: 10px 0;
          position: relative;
        }
        .errorMsg {
          margin-bottom: 5px;
          margin-left: 10px;
          text-align: left;
          color: red;
        }
        .getYzm {
          position: absolute;
          top: 102px;
          left: 326px;
          color: #409eff;
          cursor: pointer;
        }
        .el-button {
          margin-top: 20px;
          width: 100%;
          height: 40px;
        }
      }
    }
  }
}
</style>